body {
	padding-top: 50px;
  font-family: 'open_sansregular',arial,verdana;
  font-size: 14px;
  /*background-color: #fafafa;*/
  color: #777;
  cursor: default;
  /*background-color: #ecf0f3;*/
  background-color: #fff;
}
@font-face {
    font-family: 'open_sansbold';
    src: url('../fonts/opensans_bold/OpenSans-Bold-webfont.eot');
    src: url('../fonts/opensans_bold/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans_bold/OpenSans-Bold-webfont.woff') format('woff'),
         url('../fonts/opensans_bold/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('../fonts/opensans_bold/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sanssemibold';
    src: url('../fonts/opensans_semibold/OpenSans-Semibold-webfont.eot');
    src: url('../fonts/opensans_semibold/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans_semibold/OpenSans-Semibold-webfont.woff') format('woff'),
         url('../fonts/opensans_semibold/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('../fonts/opensans_semibold/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/open-sans/OpenSans-Regular-webfont.eot');
    src: url('../fonts/open-sans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/open-sans/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fonts/open-sans/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../fonts/open-sans/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sanslight';
    src: url('../fonts/opensans_light/OpenSans-Light-webfont.eot');
    src: url('../fonts/opensans_light/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans_light/OpenSans-Light-webfont.woff') format('woff'),
         url('../fonts/opensans_light/OpenSans-Light-webfont.ttf') format('truetype'),
         url('../fonts/opensans_light/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}
.coba {
  background-color: #ff0000 !important;
}
p {
  line-height: 1.5;
}
/* untuk header */
.logo {
  z-index: 9997;
  float: left;
}
.logo img {
  height: 40px;
  margin-top: 3px;
}
.logo img:hover{
  opacity: 1;

}

.fix-kanan-nav {
  margin-right: 0;
}
@media (max-width: 640px) {
  .logo {
    margin-right: 0;
  }
  .fix-kanan-nav {
    margin-right: -15px;
  }
}
/* end header */
/* untuk semua */
.img-slide-atas {
  margin-bottom: 40px;
}
.img-slide-atas img {
  width: 100%;
}
@media (max-width: 640px) {
  .img-slide-atas img {
    width: 60%;
  }
  .img-slide-atas {
    margin-bottom: 10px;
  }
}
.carousel-caption h1 {
  font-family: 'open_sansbold', arial;
  color: #fafafa;
}
.img-slider-abs {
  position: absolute;
}
.img-slider-abs img {
  width: 100px;
}
.carousel-caption-testi {
  text-align: center;
}
.bg-lightgrey {
  background-color: #fafafa;
  padding: 10px 0;
}
.bg-green {
  background-color: #6bb4a0;
  padding: 10px 0;
}
.green-area p {
  color: #fff;
  text-align: justify;
}
.bg-orange {
  background-color: #f8ad30;
  padding-bottom: 10px;
  margin-top: 20px;
}
.bg-orange p {
  margin: 0;
}
.bg-orange .container-home h1 {
  color: #fff;
  margin-top: 0;
}
.italic {
  font-style: italic;
}
.bold {
  font-weight: bold;
  font-family: 'open_sanssemibold', arial;
}
.margintopfooter {
  margin-top: 100px;
}
.margintop50 {
  margin-top: 50px;
}
.margintop35 {
  margin-top: 35px;
}
.margintop25 {
  margin-top: 25px;
}
.margintop20 {
  margin-top: 20px;
}
.margintop15 {
  margin-top: 15px;
}
.margintop10 {
  margin-top: 10px;
}
.full-width {
  width: 100%;
}
.padding15 {
  padding: 15px;
}
.padding10 {
  padding: 5px 10px;
}

.img-left a {
  height: 64px;
  width: 64px;
  overflow: hidden;
  text-align: center;
}
.img-left img {
  height: 64px;
  border: 3px solid #ddd;
}
.img-left-sidebar img {
  height: 40px;
}
.divider {
  height: 1px;
  background-color: #eee;
  width: 100%;
}
.carousel {
  z-index: 900;
}
.support-online-fixed {
  position: fixed;
  top: 200px;
  left: 0;
  background-color: #333;
  padding: 3px 5px;
  z-index: 10;
  -webkit-border-radius: 0 8px 8px 0;
  -moz-border-radius: 0 8px 8px 0;
  border-radius: 0 8px 8px 0;
}
.support-online-fixed img {
  height: 200px;
}
/* end untuk semua*/
/* blog home */
.outer-blog {
  margin-bottom: 35px;
}
.outer-blog h2 {
  font-family: 'open_sansbold', arial;
  margin-top: 0;
  margin-bottom: 3px;
  color: #6bb4a0;
  font-weight: normal;
  font-size: 18px;
  height: 40px;
  overflow: hidden;
}
.outer-blog h2 > a {
  color: #6bb4a0;
}
.outer-blog h2 > a:hover {
  color: #F8AD30;
}
.post-time {
  font-family: 'open_sanssemibold', arial;
  font-size: 13px;
  color: #f8ad30;
  margin-top: 0;
}
.outer-blog .shorter-blog {
  height: 148px;
}
.outer-blog .page-ringkas {
  text-align: justify;
  height: 128px;
  overflow: hidden;
}
/* end blog home*/
/* untuk home */
.head-daftar {
  background: rgba(255,255,255,0.30);
  padding: 15px 20px;
  float: right;
  width: 400px;
}
.head-daftar h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-family: 'open_sanslight';
  color: #333;
}
.daftar-single h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-family: 'open_sanslight';
  color: #333;
}
.btn-fb {
  color: #fff;
  background-color: #3b5998;
  /*border: 2px solid #1ba0e2;*/
  text-align: left;
}
.btn-fb:hover,
.btn-fb:focus,
.btn-fb.focus,
.btn-fb:active,
.btn-fb.active,
.open > .dropdown-toggle.btn-fb {
  color: #fff;
  background-color: #274b97;
  /*border-color: #04b6ed;*/
}
.btn-tw {
  color: #fff;
  background-color: #00aced;
  /*border: 2px solid #1ba0e2;*/
  text-align: left;
}
.btn-tw:hover,
.btn-tw:focus,
.btn-tw.focus,
.btn-tw:active,
.btn-tw.active,
.open > .dropdown-toggle.btn-tw {
  color: #fff;
  background-color: #129ace;
  /*border-color: #04b6ed;*/
}
.btn-gplus {
  color: #fff;
  background-color: #dd4b39;
  /*border: 2px solid #1ba0e2;*/
  text-align: left;
}
.btn-gplus:hover,
.btn-gplus:focus,
.btn-gplus.focus,
.btn-gplus:active,
.btn-gplus.active,
.open > .dropdown-toggle.btn-gplus {
  color: #fff;
  background-color: #d42d18;
  /*border-color: #04b6ed;*/
}
.top-user {
  text-align: center;
}
.top-user .topuser-home {
  height: 100px;
  border: 5px solid #eee;
}
.top-user h3 {
  font-family: 'open_sansbold', arial;
  color: #6bb4a0;
  font-size: 18px;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 8px;
} 
.top-user h4 {
  font-family: 'open_sanssemibold', arial;
  color: #f8ad30;
  font-size: 16px;
  font-weight: normal;
  margin-top: 0;
} 
.top-user h5 {
  font-family: 'open_sansbold', arial;
  font-size: 16px;
  font-weight: normal;
  margin-top: 0;
}
/*------------------*/
.sub {
  color: #666;
}
.top-user-single {
  text-align: center;
  height: 225px;
  position: relative;
  overflow: hidden;
}
.top-user-single .outer-all {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
}
.top-user-single .topuser-home {
  height: 100px;
  border: 5px solid #eee;
}
.top-user-single h3 {
  font-family: 'open_sanssemibold', arial !important;
  color: #6bb4a0;
  font-size: 14px !important;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 5px !important;
  height: 18px;
  overflow: hidden;
} 
.top-user-single h4 {
  font-family: 'open_sanssemibold', arial;
  color: #f8ad30;
  font-size: 13px;
  font-weight: normal;
  margin-top: 0;
}
/* top user*/
.top1 {
  background-color: #fafafa;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #eee;
}

.top-user .level {
  font-size: 16px;
  font-family: 'open_sansbold', arial;
  margin-bottom: 0;
}
.top-user .nilai-user {
  font-size: 16px;
  font-family: 'open_sansbold', arial;
  color: #f7a721;
}
.outer-img-topuser {
  position: relative;
  width: 150px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 10px;
}
.outer-img-topuser .img-single {
  height: 150px;
  margin-bottom: 15px;
  border: 5px solid #eee;
}

.badge-home {
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  font-family: 'open_sansbold', arial;
  font-size: 24px;
  text-align: center;
  padding-top: 12px;
  width: 60px;
  height: 60px;
  background: url('../images/badgetop3.png') center no-repeat;
  background-size: 100%;
}
.badge-silver {
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  font-family: 'open_sansbold', arial;
  font-size: 24px;
  text-align: center;
  padding-top: 12px;
  width: 60px;
  height: 60px;
  background: url('../images/badgesilver.png') center no-repeat;
  background-size: 100%;
}
.badge-single {
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  font-family: 'open_sansbold', arial;
  font-size: 30px;
  text-align: center;
  padding-top: 20px;
  width: 80px;
  height: 80px;
  background: url('../images/badgetop3.png') center no-repeat;
  background-size: 100%;
}
.st-nd-rd {
  font-size: 13px;
  font-family: 'open_sansregular', arial;
  vertical-align: text-top;
  line-height: 1.9;
}
.img-topuser img {
  height: 120px;
  border: 5px solid #eee;
}
/* end top user*/
.col-fitur {
  margin-bottom: 25px;
}
.col-fitur .icon {
  color: #f8ad30;
}
.col-fitur p {
  text-align: center;
}
.col-fitur h2 {
  text-align: center;
  font-family: 'open_sansbold', arial;
  font-size: 18px;
  color: #f8ad30;
  margin-top: 0;
}
.container-home {
  padding-top: 15px;
  padding-bottom: 15px;
}
.container-home h1 {
  font-family: 'open_sanslight', arial, verdana;
  margin: 10px 0 25px 0;
  text-align: center;
  font-weight: normal;
  color: #555;
}
.head-home {
  background: url('../images/head-home.jpg') no-repeat #fff244;
  background-size: 100%;
  width: 100%;
  height: 450px;
}
.head-home h1 {
  font-family: 'open_sansbold', arial;
  color: #333;
  text-align: right;
}
.heading-col {
  font-family: 'open_sanssemibold', arial, verdana;
  font-size: 14px;
}
.footer-col {
  padding: 5px 15px;
  text-align: center;
  background-color: #fafafa;
}
.footer-col a {
  color: #bbb;
  font-family: 'open_sanssemibold', arial, verdana;
}
.footer-col a:hover {
  color: #1ba0e2;
}
/* end home */
/* testimoni single */
.outer-testi-single {
  background-color: #fff;
}
.media-testi {
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
  margin-top: 20px;
}
.media-testi .img-testi img {
  height: 150px;
  border: 5px solid #eee;
}
.media-testi .heading-testi {
  font-family: 'open_sansbold', arial;
  font-size: 18px;
  color: #6bb4a0;
  margin-top: 10px;
  margin-bottom: 10px;
}
.heading-testi .stat {
  color: #999;
  font-family: 'open_sansregular', arial;
  font-size: 16px;
  font-style: italic;
}
/* end testimoni single */
/* rapor */
.table-rapor tr td {
  padding: 5px 0;
}
.img-rapor {
  width: 200px;
  height: 200px;
  border-radius:15px;
}
.control-label {
  font-size: 13px;
}
/* end rapor*/
/* lesson */
.jdl-mp3 {
  font-size: 12px;
  margin-left: 5px;
}
.left-lesson {
  /*height: 430px;*/
  overflow: hidden;
  border: 1px solid #eee;
}
.right-lesson {
  height: 600px;
  padding: 15px;
  overflow-x: hidden;
  overflow-y: scroll; 
  width: 100%;
  border: 1px solid #eee;
} 
.audio {
  border: 1px solid #eee;
  padding: 15px;
}
/* end lesson */
/* soal */
.outer-soal {
  padding: 15px 40px 15px 0;
  /*border-bottom: 1px dotted #ddd;*/
}
.outer-soal .isian {
  width: 100px;
  background-color: #ff0000;
}
.isian .form-control2 {
  height: 28px;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 1px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.isian .form-control2:focus {
  border-color: #f8ad30;
  outline: 0;
  /*-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);*/
}
.outer-cek-nilai {
  background: #fafafa;
  padding: 20px 40px;
  float: right;
  margin-top: 20px;
  border: 1px solid #eee;
}
.outer-cek-nilai h2 {
  font-size: 38px;
  font-family: 'open_sansbold', arial;
  color: #6bb4a0;
}
.outer-cek-nilai .benarsalah {
  clear: both;
  font-size: 16px;
  font-family: 'open_sansbold', arial;
}
.benarsalah .benar {
  color: #328edc;
}
.benarsalah .salah {
  color: #ff0000;
}
/* end soal*/
/* single page */
table a {
  color: #999;
}
table td {
  font-size: 14px;
}
.bg-white-single {
  background-color: #fff;
  margin-top: -150px;
  min-height: 400px;
}
.bg-white-single h1 {
  color: #61a986;
  font-family: 'open_sansbold', arial;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 24px;
  text-transform: uppercase;
}
.bg-white-single h3 {
  color: #61a986;
  font-family: 'open_sansbold', arial;
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px;
}
.bg-white-single p {
  text-align: justify;
}

/* Orang dihilangkan */
.bg-white-single-2 {
  background-color: #fff;
  margin-top: 10px;
  min-height: 400px;
}
.bg-white-single-2 h1 {
  color: #61a986;
  font-family: 'open_sansbold', arial;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 24px;
  text-transform: uppercase;
}
.bg-white-single-2 h3 {
  color: #61a986;
  font-family: 'open_sansbold', arial;
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px;
}
.bg-white-single-2 p {
  text-align: justify;
}
/* End Orange dihilangkan */

.top-orange {
  background-color: #f8ad30;
  height: 250px;
  color: #fff;
}
.top-orange h1 {
  font-family: 'open_sansbold', arial;
  margin-top: 30px;
  font-size: 34px;
  display: none;
}
.top-orange h3 {
  font-size: 16px;
  margin-top: 0;
  display: none;
}
.single h1 {
  margin: 0 0 30px 0;
  padding-bottom: 7px;
  border-bottom: 1px dotted #ccc;
  font-size: 24px;
  font-family: 'open_sanssemibold', arial, verdana;
}
/* end single page */
/* untuk footer */
.leftfooter a{
  color: #fff;
  margin: 0 8px;
}
.leftfooter a:hover{
  text-decoration: underline;
}
.footer-home {
  width: 100%;
  height: 300px;
  background-color: #eee;
}
.footer-home .footer-address {
  position: relative;
  background-color: #f7ac2f;
  padding: 25px;
  left: 30px;
  top: 30px;
  color: #fff;
  width: 300px;
}
.footer-home .footer-address h2 {
  margin-top: 0;
  font-family: 'open_sansbold', arial;
}
#footer {
  width: 100%;
  padding-bottom: 0;
  color: #fff;
}
.footer-b {
  width: 100%;
  padding: 10px 0;
  background-color: #6bb4a0;
  font-family: 'open_sanssemibold', arial;
}
.footer-single {
  width: 100%;
  color: #fff;
  padding: 10px 0;
  background-color: #f8ad30;
  font-size: 13px;
}
.footer-single a {
  color: #fff;
}
/* end untuk footer */
/* for efek hover */
/*a {
  -moz-transition: color 500ms ease-in-out 0s, background-color 500ms ease-in-out 0s;
  -ms-transition: color 500ms ease-in-out 0s, background-color 500ms ease-in-out 0s;
  -o-transition: color 500ms ease-in-out 0s, background-color 500ms ease-in-out 0s;
  -webkit-transition: color 500ms ease-in-out 0s, background-color 500ms ease-in-out 0s;
  transition: color 500ms ease-in-out 0s, background-color 500ms ease-in-out 0s;
  white-space: normal;
}
img {
  -moz-transition: color 500ms ease-in-out 0s, opacity 500ms ease-in-out 0s;
  -ms-transition: color 500ms ease-in-out 0s, opacity 500ms ease-in-out 0s;
  -o-transition: color 500ms ease-in-out 0s, opacity 500ms ease-in-out 0s;
  -webkit-transition: color 500ms ease-in-out 0s, opacity 500ms ease-in-out 0s;
  transition: color 500ms ease-in-out 0s, opacity 500ms ease-in-out 0s;
  white-space: normal;
}
img:hover {
  opacity: 0.8;
}*/
/* end efek hover */

/* CSS Tambahan Lesson by Dibyo */
.right-lesson table {
  width: 100%;
  margin-bottom: 15px;
}

.right-lesson table tr th{
  background-color:#F8AD30;
  border-bottom-color:#DDDDDD;
  border-bottom-style:solid;
  border-bottom-width:2px;
  color:#FFFFFF;
  padding:10px 8px;
  vertical-align:middle;
}

.right-lesson table tr td{
  border:1px solid #dddddd;
  padding:10px 8px;
  vertical-align:middle;
}

.nilai{
  background-color: #E6614F;
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
}

/* Challenge */
.timer-challenge {
  position: fixed;
  left: 0;
  top: 40%;
  padding: 20px 14px;
  color: #fff;
  font-family: 'open_sansbold', arial;
  font-size: 24px;
  background-color: #6bb4a0;
  -webkit-border-radius: 0px 5px 5px 0px;
  -moz-border-radius: 0px 5px 5px 0px;
  border-radius: 0px 5px 5px 0px;
}
.challenge{
  margin-bottom: 20px;
}

.lock{
  height: 400px;
  background-color: #fafafa;
  text-align: center;
  padding: 30px;
  border: 1px solid #eee;
}
/* End Challenge */
.timer {
  font-size: 24px;
  background-color: #6bb4a0;
  float: right;
  color: #fff;
  font-family: 'open_sansbold', arial;
  padding: 4px 20px;
}
.star-abu {
  color: #ccc;
}
.star-gold {
  color: #f2b23a;
}
.font-hasil {
  font-family: 'open_sansbold', arial;
  font-size: 18px;
}
.jdl-hasil {
  margin: 0;
  color: #4fa38c;
}
/* lesson */

@media (min-width: 1025px) {
  .lesson1 {
    position: relative; top: 0px; left: 0px; width: 455px; height: 600px;
  }
  .lesson2 {
    cursor: move; position: absolute; left: 0; top: 0px; width: 455px; height: 600px; overflow: hidden;
  }
}
@media (max-width: 1024px) {
  .lesson1 {
    position: relative; top: 0px; left: 0px; width: 373px; height: 527px;
  }
  .lesson2 {
    cursor: move; position: absolute; left: 0; top: 0px; width: 373px; height: 527px; overflow: hidden;
  }
}
@media (max-width: 768px) {
  .lesson1 {
    position: relative; top: 0px; left: 0px; width: 718px; height: 1000px;
  }
  .lesson2 {
    cursor: move; position: absolute; left: 0; top: 0px; width: 718px; height: 1000px; overflow: hidden;
  }
}
@media (max-width: 640px) {
  .lesson1 {
    position: relative; top: 0px; left: 0px; width: 592px; height: 830px;
  }
  .lesson2 {
    cursor: move; position: absolute; left: 0; top: 0px; width: 592px; height: 830px; overflow: hidden;
  }
}
@media (max-width: 480px) {
  .lesson1 {
    position: relative; top: 0px; left: 0px; width: 432px; height: 610px;
  }
  .lesson2 {
    cursor: move; position: absolute; left: 0; top: 0px; width: 432px; height: 610px; overflow: hidden;
  }
}
/* end lesson*/

/* tambahan carousel */
/*.carousel-caption h1 {
  font-family: 'open_sansbold', arial !important;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.carousel-caption p {
  font-family: 'open_sansregular', arial !important;
  color: #fff;
  font-size: 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}*/
/* end tambahan carousel*/

/*
|============================================================
|
| Tambahan by Khoiruddin
|
|============================================================
*/

.table{
  border:1px solid #DDDDDD;
  border-radius: 3px;
  overflow: hidden;
}
.table-form > tbody > tr > td {
  padding-top: 0px !important;
  padding-right: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 0px !important;
}
.dropdown-menu > li > a {
  border-bottom-width:0;
}
